<!--
* description: 采购供应商打印
-->
<template>
  <section class="editCarBrand">
    <el-dialog
      v-dialogDrag
      :close-on-click-modal="false"
      title="标签打印"
      :append-to-body="true"
      :visible.sync="showDialog"
      width="800px"
      @close="close"
    >
      <dialogHeader
        slot="title"
        title="交货单"
        :styleType="$store.state.app.dialogType"
      ></dialogHeader>
      <div class="filter-container filter-params" style="position: relative">
        <el-button size="medium" type="primary" class="printBtn" @click="print"
          >打印
        </el-button>
        <div class="" ref="print">
          <div v-for="(item, i) in printData" :key="i">
            <div class="printDIV" style="text-align: center" >
              <h3 class="tace">交货单</h3>
            </div>
            <div
              v-for="(itemson, index) in item.list"
              :key="index"
              v-if="index == 0"
            >
              <div class="tab">
                <span  style="font-family:华康金刚黑;" > 交货单号：{{ itemson.ARRIVAL_CODE }} </span>
                <span  style="font-family:华康金刚黑;"  > 发货时间：{{ itemson.CREATED_DATE }} </span>
                <span  style="font-family:华康金刚黑;"  > 供应商编号：{{ itemson.SUPPLIER_CODE }} </span>
                <span  style="font-family:华康金刚黑;"> 供应商名称：{{ itemson.PARTNER_SHORT_NAME }} </span>
                <span  style="font-family:华康金刚黑;" > 到货仓库：{{ itemson.WAREHOUSE_NAME }} </span>
                <span  style="font-family:华康金刚黑;"> 到货仓库具体地址：{{ itemson.WAREHOUSE_ADDR }} </span>
              </div>
            </div>
            <div class="tab">
              <img :id="'barcodeT' + i" />
            </div>
            <table
              class="table"
              style="
                border-collapse: collapse;
                width: 90%;
                margin-left:1%;
                width: 90%;                
              "
            >
              <tr>
                <td  style="font-family:华康金刚黑;">采购单号</td>
                <td style="font-family:华康金刚黑;">采购单行号</td>
                <td style="font-family:华康金刚黑;">备件编号</td>
                <td style="font-family:华康金刚黑;">备件名称</td>
                <td style="font-family:华康金刚黑;">零件编号</td>
                <td style="font-family:华康金刚黑;">采购数量</td>
                <td style="font-family:华康金刚黑;">发货数量</td>
                <td style="font-family:华康金刚黑;">备件条码</td>
              </tr>
              <tr v-for="(e, j) in item.list" :key="j">
                <td>{{ e.RELATION_CODE}}</td>
                <td>{{ e.PURCHASE_LINE_CODE}}</td>
                <td>{{ e.PART_NO }}</td>
                <td>{{ e.PART_NAME }}</td>
                <td>{{ e.COMPONENTS_NO}}</td>
                <td>{{ e.PURCHASE_QTY }}</td>
                <td>{{ e.ARRIVAL_QTY }}</td>
                <td><img class="barwidth" :id="'barcode'+i + j" /></td>
              </tr>
            </table>
            <div style="page-break-after: always" />
          </div>
        </div>
      </div>

      <!-- <div slot="footer" class="dialog-footer"></div> -->
    </el-dialog>
  </section>
</template>

<script>
import request from "@/utils/request";
import QRCode from "qrcodejs2";
import JsBarcode from "jsbarcode";
export default {
  components: {
    dialogHeader: () => import("@/components/dialogHeader"), //弹窗标题
  },
  props: {
    isShow: { type: Boolean, default: false },
    formField: { type: String, default: '' },
  },
  data() {
    return {
      // outerHTML:[],
      // 是否显示
      showDialog: this.isShow,
      listRow: [],
      printData: [],
    };
  },
  created() {
    this.queryInfo();
  },
  mounted() {},

  methods: {
    queryInfo() {
      request({
        url: "/mp/wm/vl/warehouse/purchase/PrintPurchaseD.do",
        method: "post",
        data: {
          PURCHASE_D_IDS: this.formField,
        },
      })
        .then((res) => {
          if (res.result === "1") {
            this.listRow = res.listRow;

            let dataArr = []; //分类后的数据 用于打印
            let arrData = this.listRow;
            arrData.map((mapItem) => {
              if (dataArr.length == 0) {
                dataArr.push({
                  ARRIVAL_CODE: mapItem.ARRIVAL_CODE,
                  list: [mapItem],
                });
              } else {
                let res = dataArr.some((item) => {
                  //按ARRIVAL_CODE分页
                  if (item.ARRIVAL_CODE == mapItem.ARRIVAL_CODE) {
                    item.list.push(mapItem);
                    return true;
                  }
                });
                if (!res) {
                  //如果没找相同ARRIVAL_CODE则添加一个新对象
                  dataArr.push({
                    ARRIVAL_CODE: mapItem.ARRIVAL_CODE,
                    list: [mapItem],
                  });
                }
              }
            });

            this.printData = dataArr;

            // console.log( this.printData);
            this.createJsBarcodeTop(); //上面的条形码
            this.createJsBarcode();
          } else {
            this.$message({
              message: res.debugMsg ? res.debugMsg : res.msg,
            });
            this.showDialog = false;
            this.$emit("detailClose");
          }
        })
        .catch((err) => {
          this.$message({
            message: "因网络错误导致此操作无法完成",
          });
          this.showDialog = false;
          this.$emit("detailClose");
        });
    },
    createJsBarcodeTop() {
      this.printData.forEach((item, index) => {
        setTimeout(() => {
          JsBarcode("#barcodeT" + index, item.ARRIVAL_CODE, {
            format: "CODE39",
            lineColor: "#000",
            background: "#fff",
            width: 1,
            height: 50,
            displayValue: true,
          });
        }, 50);
      });
    },

    createJsBarcode() {   
        this.printData.forEach((item, i) => {
          console.log(item);
          item.list.forEach((itemi, j) => {
             setTimeout(() => {
              JsBarcode("#barcode" + i+j, itemi.PART_NO, {
                format: "CODE39",
                lineColor: "#000",
                background: "#fff",
                width: 1,
                height: 50,
                displayValue: true,
              });
             }, 100);
          });
        });
     
    },
    close() {
      this.showDialog = false;
      this.$emit("detailClose");
    },
    print() {
      let styles = `@page{size: auto; margin: 0mm;}
      .tab {text-align: center;font-family:宋体;}
      .tab span {display: inline-block;width: 50%; font-family:华康金刚黑;}
      .table {border: 1px solid black;border-collapse:collapse;margin-left:3%;width:90%;}
      .table td {border: 1px solid black; word-break: keep-all;white-space:nowrap;text-align: center; border-collapse:collapse;font-family:华康金刚黑;}
      .fiwuou {padding-left: 192px; border-collapse:collapse;}
      // .barwidth{width: 100px;}
      .tace { padding-top: 50px;font-family:华康金刚黑;}
      }`;
      this.$printJs.printByEle(this.$refs.print, styles);
      this.$printJs.getStyle(this.$refs.print);
      this.showDialog = false;
      this.$emit("detailClose");
    },
  },
};
</script>
<style lang="scss" scoped>
.tab {
  text-align: center;
  
  // padding-left: 85px
}
.tab span {
  display: inline-block;
  width: 50%;
  // padding-right: 85px;
  // padding-left: 85px
}
.barcode {
  display: inline-block;
  img {
    width: 132px;
    height: 132px;
    background-color: #fff; //设置白色背景色
    padding: 6px; // 利用padding的特性，挤出白边
    box-sizing: border-box;
  }
}

.table {
  border: 1px solid black;
  border-collapse: collapse;
  margin-left: 2%;
  width: 90%;
  // margin-left: 45px;
}
.table td {
  text-align: center;
  width: 20px;
  border: 1px solid black;
  word-break: keep-all;
  white-space: nowrap;
}
.fiwuou {
  padding-right: 142px;
}
// .barwidth {
//   width: 100px;
// }
.tace {
  padding-top: 50px;
}
</style>